<template>

  <div class="main-content" style="width: 60%">
    <el-row :gutter="20" >
      <el-col @click="goPage('/front/seatReserve?id='+item.id)" :span="8" v-for="item in data.roomList" :key="item.id" style="margin-bottom: 10px">
        <div class="book-box">
          <img :src="item.img" style="width: 100%;height: 250px;border-radius: 5px">
        </div>
        <div style="margin-bottom: 10px;font-size: 20px">{{item.name}}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>

import {reactive} from "vue";
import request from "@/utils/request.js";

const data=reactive({
  roomList:[]
})
request.get('room/selectAll').then(res=>{
  data.roomList=res.data
})
const goPage = (path) => {
  location.href=path
}
</script>

<style scoped>
.book-box{
  overflow: hidden;
}

.book-box:hover img{
  cursor: pointer;
  scale: 1.1;
}

.book-box img{
  transition: all 0.2s;
}
.category-active{
  color: #1890ff;
}
</style>